<template>
  <div class="form-search-container" :class="layout ? layout : 'inline'">
    <div class="form-search-els">
      <AiForm
        :data="data"
        :layout="layout"
        @change="change"
        @search="search"
        @select="select"
        ref="formRef"
      ></AiForm>
    </div>
    <div
      class="form-search-btn"
      v-if="showBtns"
      :style="layout ? `padding-left: ${mxw || 80}px` : ''"
    >
      <div class="btn" v-for="(item, i) in btns" :key="i">
        <a-button v-if="item.type" :type="item.type || ''" @click="search(item)"
          ><i v-if="item.icon" :class="item.icon"></i>{{ item.label }}</a-button
        >
        <a-button v-else @click="search(item)"
          ><i v-if="item.icon" :class="item.icon"></i>{{ item.label }}</a-button
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import store from "@/store";
import { defineExpose } from "vue";
const emit = defineEmits();
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
  data: {
    type: Array,
    default: () => {
      return [];
    },
  },
  layout: {
    type: String,
    default: "inline",
  },
  showBtns: {
    type: Boolean,
    default: true,
  },
  btns: {
    type: Array,
    default: () => {
      return [
        {
          label: "搜索",
          type: "primary",
          width: "84px",
          key: "search",
        },
        {
          label: "重置",
          width: "84px",
          key: "reset",
        },
      ];
    },
  },
});

const formData = ref({});
const formRef = ref(null);

/**
 * 触发搜索事件。
 * 该函数通过调用`emit`方法触发一个名为`search`的事件，告知父组件执行搜索操作。
 * 没有传入参数，因为搜索操作可能只需要触发事件而不需要额外的上下文信息。
 */
const search = (item) => {
  const obj = {
    搜索: "search",
    重置: "reset",
  };

  let val = {};
  const O = store.state.app.formSearchData[props.id];
  Object.keys(O).forEach((k) => {
    if (O[k] !== "") {
      val[k] = O[k];
    }
  });

  const mxw = computed(() => {
    return Math.max(...props.data.map((item) => item.labelWidth || 0));
  });

  if (item.method) {
    item.method(val);
  } else {
    if (obj[item.label] === "reset" || item.key === "reset") {
      formRef.value?.resetForm();
      store.dispatch("app/clearFormSearchData", props.id);
    }
    if (item.key.indexOf("export") > -1) {
      emit("btnCK", {
        formData: val,
        btn: item,
      });
    } else {
      emit("search", {
        formData: val,
        key: obj[item.label] || item.key,
      });
    }
  }
};

/**
 * 触发变更事件。
 * 该函数通过调用`emit`方法触发一个名为`change`的事件，并传递一个对象作为参数。
 * 父组件可以通过监听这个事件来响应数据的变化，参数对象包含具体的变更信息。
 * @param {Object} obj - 包含变更信息的对象。
 */
const change = (obj) => {
  if (obj.target) return;
  formData.value = obj;
  console.log(obj, "changeform");
  store.dispatch("app/setFormSearchData", {
    key: props.id,
    val: obj,
  });
};
/**
 * 选择项函数
 * 该函数用于处理当一个项被选择时的逻辑
 * @param {any} index - 被选择的项
 */
const select = (index) => {
  emit("select", index);
};

const setForm = (val) => {
  formRef.value?.setForm(val);
};

const validate = () => {
  return formRef.value.validate();
};

defineExpose({
  search,
  setForm,
  validate,
});
</script>
<style lang="scss" scoped>
.form-search-container {
  display: flex;
  background-color: var(--form-search-bg-color);
  padding: 15px 0;
  &.vertical {
    flex-direction: column;
  }
  .form-search-els {
    flex: 1;
  }
}
.form-search-btn {
  display: flex;
  margin-right: 10px;
  &.vertical {
    padding-left: 80px;
  }
  .btn {
    margin-right: 10px;

    button {
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        font-size: 15px;
        margin-right: 10px;
      }
    }
  }
}
</style>
